import { useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router";
import { NavBar, Swiper,Image } from 'antd-mobile'
import Sty from "../../style/square/squareDetail.module.css";


import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
export default () => {
  let location = useLocation();
  let history = useHistory()
  let { state } = location
  
  const [detailData,setDetailData]:any=useState({ id: 1, title: '卡通金属文具盒', type: '图书文具', time: '2019-8-20', des: '这个文具盒陪我很多年了，一直舍不得扔。忍痛卖出，有要的联系我...', price: 123, img_url: [require('../../images/wjh.png').default, require('../../images/wjh.png').default,
  require('../../images/wjh.png').default], nickName: '你得支棱起来啊', nickAttr:require("../../images/20211220102552.jpg").default, fans: 123, follow: 123, fabulous: 123, see: 123, comment: 123 })
  useEffect(() => {
     setDetailData(state)
   },[])
  const back = () => history.goBack();
  const swiperItem = () => {
    console.log(detailData.img_url)
    return detailData.img_url.map((item:any,ind:any) => {
      return <Swiper.Item key={ind}>
        <div className={Sty.banner_img}>
          <img src={'http://localhost:8888/'+item.src} alt=""/>
        </div>
      </Swiper.Item>
    })
  }
  return <>
   
    <div className={Sty.top}>
       <NavBar onBack={back}>产品详情</NavBar>
    </div>
    <div className={Sty.swiper_box}>
      <Swiper autoplay loop>
        {detailData.img_url?swiperItem():[]}
       </Swiper>
    </div>
    <div className={Sty.detail_box}>
      <h2>{detailData.title}</h2>
      <div className={Sty.price}>
        <span> <i>￥</i>{detailData.price }</span>
        <em>一小时前发布</em>
      </div>
      <div className={Sty.detailData_des}>
        {detailData.des}
      </div>
      <div className={Sty.detailData_publisher}>
        <div className={Sty.detailData_publisher_title}>发布人</div>
         <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
            style={{ borderRadius: 16 }} />
          </div>
          <div className={Sty.user_r}>
            <p>{ detailData.nickName}</p>
            <p className={Sty.user_r_b}><span>粉丝:{detailData.fans}</span>关注:{detailData.follow}<span></span></p>
          </div>
          </div>
          <div className={Sty.user_r_item}>+关注</div>
        </div>

      </div>
      {/* 留言 */}
       <div className={Sty.detailData_publisher}>
        <div className={Sty.detailData_publisher_title}>全部留言</div>
        <ul>
          <li className={Sty.leavingItem}>
            <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
                   style={{ borderRadius: 16 }} />
                  <div className={Sty.nickName}>{ detailData.nickName}</div>
          </div>
          </div>
          <div className={Sty.user_r_item1}><i></i></div>
            </div>
             <div className={Sty.leaving}>
            { detailData.des}
          </div>
          </li>
         
         <li className={Sty.leavingItem}>
            <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
                   style={{ borderRadius: 16 }} />
                  <div className={Sty.nickName}>{ detailData.nickName}</div>
          </div>
          </div>
          <div className={Sty.user_r_item1}><i></i></div>
            </div>
             <div className={Sty.leaving}>
            { detailData.des}
          </div>
          </li>
         
       </ul>

      </div>

    </div>
    {/* 内容 */}
    <div className={Sty.detailData_bottom}>
      <div className={Sty.detailData_bottom_l}>
        <div><i></i><p>点赞</p></div>
        <div><i className={Sty.pl_bck}></i><p>评论</p></div>
        <div><i className={Sty.sc_bck}></i><p>收藏</p></div>
      </div>
      <div className={Sty.detailData_bottom_r}>
        我想要
      </div>
    </div>
  </>
}